/// REEL
/// A layout that creates a carousel-like element

/// CONFIGURATION
/// Add an attribute of data-scroll="snap" to the element
/// to enable scroll snapping
.reel {
  --reel-space: 2rem;
  display: flex;
  height: auto;
  max-width: 100%;
  margin-inline: auto;

  /// Padding allows child element hover states to show
  padding: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reel > * {
  flex-basis: var(--reel-item-width, calc(33.333% - var(--reel-space)));
  flex-shrink: 0;
}

.reel > * + * {
  margin-inline-start: var(--reel-space);
}

/// Adds extra space if the reel has a scrollbar
.reel.scrollbar {
  padding-block-end: get-space('size-1');
}

/// SCROLL TYPE EXCEPTION
/// Sets the reel to snap on each item on scroll
.reel[data-scroll='snap'] {
  scroll-snap-type: x mandatory;
}

.reel[data-scroll='snap'] > * {
  scroll-snap-align: start;
}
